<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qrtzJobDetails</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />

    <script src="/webjars/jquery-form/3.51/jquery.form.js" ></script>
    <script type="text/javascript" src="/jquery.ajax.extend.js"></script>

    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>



<div class="container-fluid" style="margin: 5px 5px;"  id="qrtzJobDetailsApp">


    <div id="qrtzJobDetails-grid" v-show="showFlag === 'qrtzJobDetails-grid'">
        <!--查询form stat-->
        <div class="row" >

            <form class="form-horizontal">


                <div class="form-group col-sm-4">
                    <div class="col-sm-4 control-label">任务名称</div>
                    <div class="col-sm-8">
                        <input type="text" v-model="qrtzJobDetailsSearchForm.jobName" class="form-control input-sm">
                    </div>
                </div>


            </form>
        </div>
        <!--查询form ends-->

        <!--查询button start-->
        <div class="row">

            <div class="col-sm-8">
                <div class="btn-group" role="group">

                    <button class="btn btn-default" type="button" @click="qrtzJobDetailsAddModal">
                        新增
                    </button>
                    <!--<button class="btn btn-default" type="button" @click="qrtzJobDetailsImportModal">-->
                        <!--导入-->
                    <!--</button>-->

                    <!--<button class="btn btn-danger" type="button" @click="qrtzJobDetailsDeleteBatchModal()">-->
                        <!--删除-->
                    <!--</button>-->
                    <button class="btn btn-primary" type="button" @click="qrtzJobDetailsExport">
                        导出
                    </button>
                </div>
            </div>
            <div class="col-sm-4  text-right">
                <div class="btn-group" role="group">

                    <button class="btn btn-success" type="button" @click="doSearch">
                        查询
                    </button>
                    <button class="btn btn-default" type="button" @click="doClear">
                        清空
                    </button>

                </div>
            </div>
        </div>
        <!--查询button ends-->

        <div class="row">


            <!--分页 start-->
            <ul class="pagination  pagination-sm" style="margin-top: 5px; margin-bottom: 5px;">
                <!--<li class="page-item">-->
                <!--<a class="page-link" href="#"><i @click="switchToPage(1)">&laquo;</i></a>-->
                <!--</li>-->
                <li class="page-item">
                    <a href="#"  class="page-link" @click="goBack"><i>&lt;</i></a>
                </li>
                <li class="page-item" v-for="n in pageNumList" :class="{active:n == pageNow}">
                    <a href="#"  @click="switchToPage(n)" class="page-link">{{n}}</a>
                </li>
                <li class="page-item">
                    <a href="#"   class="page-link"  @click="goNext"><i>&gt;</i></a>
                </li>
                <li class="page-item">
                    <span class="badge">共 {{totalRows}} 条</span>
                </li>
                <!--<li class="page-item">-->
                <!--<a href="#"   class="page-link"><i  @click="switchToPage(totalPages)">&raquo;</i></a>-->
                <!--</li>-->
            </ul>
            <!--分页 ends-->


            <!--表格数据 start-->
            <table class="table table-hover table-striped table-bordered table-sm table-condensed" style="margin-top: 5px;">
                <thead >
                <tr>
                    <th>
                        <button type="button" class="btn btn-sm" @click="fnChangeAll">全部</button>

                    </th>
                    <th>#</th>

                    <th>任务名称</th>
                    <th>任务分组</th>
                    <th>描述</th>
                    <th>执行类</th>
                    <th>执行时间</th>

                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in qrtzJobDetailsList" @click="fnChangeStatus(index)">
                    <td><input class="form-control" disabled type="checkbox" :value="index" v-model="checkedRows"></td>
                    <td>{{(pageNow-1)*10 + index+1}}</td>

                    <td>{{item.jobName}}</td>
                    <td>{{item.jobGroup}}</td>
                    <td>{{item.description}}</td>
                    <td>{{item.jobClassName}}</td>
                    <td>{{item.cronExpression}}</td>


                    <td>
                        <button type="button" class="btn btn-sm  btn-primary" @click="qrtzJobDetailsTrigger(item)">触发(执行)一次</button>
                        <button type="button" class="btn btn-sm  btn-primary" @click="qrtzJobDetailsUpdateModal(item)">编辑</button>
                        <button v-if="item.triggerState == 'PAUSED'" type="button" class="btn btn-sm  btn-primary" @click="qrtzJobDetailsResume(item)">恢复</button>
                        <button v-else type="button" class="btn btn-sm  btn-primary" @click="qrtzJobDetailsPause(item)">停止</button>
                        <button type="button"  class="btn btn-sm btn-danger"  @click="qrtzJobDetailsRemove(item)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--表格数据 ends-->


            <div class="demo">

                <p>
                    格式1：	秒	分	时	天（月）	月	天（星期）	年
                </p>


                    　　<p>（1）0 0 2 1 * ? *   表示在每月的1日的凌晨2点调整任务
                　</p>　<p>（2）0 15 10 ? * MON-FRI   表示周一到周五每天上午10:15执行作业
                　</p>　<p>（3）0 15 10 ? 6L 2002-2006   表示2002-2006年的每个月的最后一个星期五上午10:15执行作
                　</p>　<p>（4）0 0 10,14,16 * * ?   每天上午10点，下午2点，4点
                　</p>　<p>（5）0 0/30 9-17 * * ?   朝九晚五工作时间内每半小时
                　</p>　<p>（6）0 0 12 ? * WED    表示每个星期三中午12点
                　</p>　<p>（7）0 0 12 * * ?   每天中午12点触发
                　</p>　<p>（8）0 15 10 ? * *    每天上午10:15触发
                　</p>　<p>（9）0 15 10 * * ?     每天上午10:15触发
                　</p>　<p>（10）0 15 10 * * ? *    每天上午10:15触发
                　</p>　<p>（11）0 15 10 * * ? 2005    2005年的每天上午10:15触发
                　</p>　<p>（12）0 * 14 * * ?     在每天下午2点到下午2:59期间的每1分钟触发
                　</p>　<p>（13）0 0/5 14 * * ?    在每天下午2点到下午2:55期间的每5分钟触发
                　</p>　<p>（14）0 0/5 14,18 * * ?     在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发
                　</p>　<p>（15）0 0-5 14 * * ?    在每天下午2点到下午2:05期间的每1分钟触发
                　</p>　<p>（16）0 10,44 14 ? 3 WED    每年三月的星期三的下午2:10和2:44触发
                　</p>　<p>（17）0 15 10 ? * MON-FRI    周一至周五的上午10:15触发
                　</p>　<p>（18）0 15 10 15 * ?    每月15日上午10:15触发
                　</p>　<p>（19）0 15 10 L * ?    每月最后一日的上午10:15触发
                　</p>　<p>（20）0 15 10 ? * 6L    每月的最后一个星期五上午10:15触发
                　</p>　<p>（21）0 15 10 ? * 6L 2002-2005   2002年至2005年的每月的最后一个星期五上午10:15触发
                　</p>　<p>（22）0 15 10 ? * 6#3   每月的第三个星期五上午10:15触发
                  </p>

            </div>

        </div>

    </div>

    <!--add modal start-->

    <div id="qrtzJobDetails-detail" v-show="showFlag === 'qrtzJobDetails-add' || showFlag === 'qrtzJobDetails-update' || showFlag === 'qrtzJobDetails-detail'">


        <div class="modal-footer">
            <button type="button" class="btn btn-default" @click="qrtzJobDetailsGridModal">返回</button>
            <button type="button" class="btn btn-primary" @click="qrtzJobDetailsAddOrUpdate">提交</button>
        </div>



        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#qrtzJobDetailscollapse1">
                            基本信息
                        </a>
                    </h4>
                </div>
                <div id="qrtzJobDetailscollapse1" class="panel-collapse collapse in">
                    <div class="panel-body">

                        <form class="form-horizontal"  role="form">

                            <div class="form-group col-sm-6" v-show="false">
                                <label for="" class="col-sm-3 control-label">sid</label>
                                <div class="col-sm-9">

                                    <input type="text" class="form-control" readonly v-model="qrtzJobDetailsDataForm.sid">

                                </div>
                            </div>


                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label"><red-star/>jobName</label>
                                <div class="col-sm-9">

                                    <input type="text" class="form-control" v-model="qrtzJobDetailsDataForm.jobName">

                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label"><red-star/>jobGroup</label>
                                <div class="col-sm-9">

                                    <input type="text" class="form-control" v-model="qrtzJobDetailsDataForm.jobGroup">

                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label">description</label>
                                <div class="col-sm-9">

                                    <input type="text" class="form-control" v-model="qrtzJobDetailsDataForm.description">

                                </div>
                            </div>

                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label"><red-star/>jobClassName</label>
                                <div class="col-sm-9">

                                    <input type="text" class="form-control" v-model="qrtzJobDetailsDataForm.jobClassName">

                                </div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="" class="col-sm-3 control-label"><red-star/>cronExpression</label>
                                <div class="col-sm-9">

                                    <input type="text" class="form-control" v-model="qrtzJobDetailsDataForm.cronExpression">

                                </div>
                            </div>



                        </form>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion"
                           href="#qrtzJobDetailscollapse2">
                            其他
                        </a>
                    </h4>
                </div>
                <div id="qrtzJobDetailscollapse2" class="panel-collapse collapse">
                    <div class="panel-body">

                        do sth
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!--add modal ends-->



    <!--tip start-->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="modal-container-qrtzJobDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body"><p>{{tipMsg}}</p></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" v-show="confirmFlag" @click="qrtzJobDetailsDelete">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--tip ends-->



    <!-- 导入 模态框（Modal） -->
    <div class="modal fade" id="modal-container-qrtzJobDetailsImport" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">导入</h4>
                </div>
                <div class="modal-body">

                    <form id="qrtzJobDetailsImportForm" method="post"  enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="">选择文件</label>
                            <input type="file" name="file" id="qrtzJobDetailsFile">
                            <p class="help-block">请选择要上传的文件。</p>
                        </div>

                        <br/>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary"  @click="qrtzJobDetailsImport">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->




</div>
</body>
</html>


<script>

    var vm = new Vue({
        el: '#qrtzJobDetailsApp',
        components:{
            'red-star': {template: '<span ><i style="color: red;">*</i> <slot></slot></span>'}
        },
        data: {
            qrtzJobDetailsSearchForm:{},
            qrtzJobDetailsDataForm:{},
            qrtzJobDetailsList:[],
            perPage:10,
            pageNow:1,
            totalPages:5,
            pageNumList:[],
            totalRows:0,
            checkedRows:[],
            checked:false,
            updateFlag:false,
            showFlag:'qrtzJobDetails-grid',
            tipMsg: '',
            confirmFlag:false,
            deleteIds:[],



        },
        methods: {


            serializ:function () {

                var arr = [];
                var qrtzJobDetailsSearchForm = this.qrtzJobDetailsSearchForm;
                for(var k in qrtzJobDetailsSearchForm){
                    arr.push([k,'=',qrtzJobDetailsSearchForm[k]].join(''));
                }
                return arr.join("&");
            },

            qrtzJobDetailsImportModal:function () {

                $('#modal-container-qrtzJobDetailsImport').modal('show');
            },
            qrtzJobDetailsImport:function () {

                var _self = this;

                var file = $("#qrtzJobDetailsFile").val();
                if (file == "") {
//                    alert("请选择要上传的文件");
                    $('#modal-container-qrtzJobDetailsImport').modal('hide');
                    _self.popTipModal('请选择要上传的文件！');
                    return false
                }

                $("#qrtzJobDetailsImportForm").ajaxSubmit({

                    type:"post",
                    url:'/qrtzJobDetails/import',
                    success:function (data) {
//                        console.log(data);
                        if(data.code == '0'){

                            $('#modal-container-qrtzJobDetailsImport').modal('hide');
                            _self.popTipModal('上传成功！');
                            _self.doSearch();

                        }else{
                            $('#modal-container-qrtzJobDetailsImport').modal('hide');
                            _self.popTipModal(data.msg);
                        }
                    }
                });
                return false;
            },

            qrtzJobDetailsExport:function () {

                window.open('/qrtzJobDetails/export?'+this.serializ())
            },


            //提示框 弹框
            popTipModal:function (msg,confirmFlag) {

                this.tipMsg = msg;
                if(!!confirmFlag){
                    this.confirmFlag = true;
                }else{
                    this.confirmFlag = false;
                }

                $('#modal-container-qrtzJobDetails').modal('show');
            },


            //返回 主页面
            qrtzJobDetailsGridModal:function () {

                this.showFlag = 'qrtzJobDetails-grid';
            },

            //新增弹框
            qrtzJobDetailsAddModal:function () {

                this.qrtzJobDetailsDataForm = { };
                this.showFlag = 'qrtzJobDetails-add';
                this.updateFlag = false;
            },

            //修改弹框
            qrtzJobDetailsUpdateModal:function (item) {

                var _self = this;
                var _sid = item.sid?item.sid:item.id;
                $.ajax({
                    url:'/job/get/' + _sid,
//                    data: _self.qrtzJobDetailsSearchForm,

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            var data = dat.data;
                            _self.qrtzJobDetailsDataForm = data;
                            _self.showFlag = 'qrtzJobDetails-update';
                            _self.updateFlag = true;
                        }
                    }
                );
            },

            //删除一个 弹框
            qrtzJobDetailsDeleteOneModal:function (item) {

                var _sid = item.sid?item.sid:item.id;
                this.deleteIds = [_sid];
                this.popTipModal('确定要删除选中的数据吗？',true);
            },

            //删除多个 弹框
            qrtzJobDetailsDeleteBatchModal:function () {

                var len = this.checkedRows.length;
                if(len<=0){
                    this.popTipModal('请选择要删除的数据');
                    return false;
                }

                this.deleteIds = [];
                for(var i=0;i<len;i++){
                    var indx = this.checkedRows[i];
                    var item = this.qrtzJobDetailsList[indx];
                    var _sid = item.sid?item.sid:item.id;
                    this.deleteIds.push(_sid);
                }
                this.popTipModal('确定要删除选中的数据吗？',true);
            },


            //删除 提交
            qrtzJobDetailsDelete:function () {

                var _self = this;

                $.ajax({
                    url:'/job/delete?ids='+_self.deleteIds,
                    type: "POST",
                    datType: "JSON",
                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            _self.popTipModal('操作成功！');
                            _self.switchToPage(1);

                        }else{
                            _self.popTipModal(dat.msg);
                        }
                    }
                );

            },

            fnChangeAll: function () {

                var length = this.checkedRows.length;
                if(length>0){
                    this.checkedRows = [];
                }else{
                    var size=this.qrtzJobDetailsList.length;
                    for(var i=0;i<size;i++){
                        this.checkedRows.push(i);
                    }
                }

            },

            fnChangeStatus:function (indx) {

                var number = this.checkedRows.indexOf(indx);
                if(number> -1){
                    this.checkedRows.splice(number, 1);
                }else{
                    this.checkedRows.push(indx);
                }
            },
            doSearch:function () {
                this.switchToPage(1);
            },
            doClear:function () {
                this.qrtzJobDetailsSearchForm={};
                this.switchToPage(1);
            },


            // 新增,修改 提交
            qrtzJobDetailsAddOrUpdate:function () {

                var _self = this;
                var postUrl = "/job/save";

                //
                $.ajax({
                    url:postUrl,
                    data: JSON.stringify(_self.qrtzJobDetailsDataForm),
                    type: "POST",
                    datType: "JSON",
                    contentType: "application/json"

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            _self.popTipModal('操作成功！');

                            _self.switchToPage(1);
                            _self.qrtzJobDetailsGridModal();

                        }else{
                            _self.popTipModal(dat.msg);
                        }
                    }
                );

            },

            // 执行 一次
            qrtzJobDetailsTrigger: function (item) {
                this.runButton(item,"/job/trigger");
            },
            // 停止
            qrtzJobDetailsPause: function (item) {
                this.runButton(item,"/job/pause");
            },
            // 恢复
            qrtzJobDetailsResume: function (item) {
                this.runButton(item,"/job/resume");
            },

            // 删除
            qrtzJobDetailsRemove: function (item) {
                this.runButton(item,"/job/remove");
            },

            runButton: function (item, postUrl) {

                var _self = this;

                //
                $.ajax({
                    url:postUrl,
                    data: item,
                    type: "POST",
                    datType: "JSON",
//                    contentType: "application/json"

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            _self.popTipModal('操作成功！');
                            _self.switchToPage(1);

                        }else{
                            _self.popTipModal(dat.msg);
                        }
                    }
                );
            },


            switchToPage:function (pageNum) {

                if( pageNum >= this.totalPages){
                    pageNum = this.totalPages;
                }
                if(pageNum <= 0 ){
                    pageNum = 1;
                }

                this.pageNow = pageNum;
                this.getDataList(pageNum);

            },

            goBack:function () {
                var nowMinPage = this.pageNumList[0];
                if(!nowMinPage || nowMinPage <= 1){
                    return ;
                }
                var start = nowMinPage-1-10;

                this.pageNumList = [];
                for(var i= start+1;i <= nowMinPage-1;i++){

                    this.pageNumList.push(i);
                }

                var page = this.pageNumList[this.pageNumList.length -1];
                this.pageNow = page;

                var _self = this;
                this.ajaxQuery(page,_self);

            },
            goNext:function () {
                var nowMaxPage = this.pageNumList[this.pageNumList.length -1];
                if(!nowMaxPage || nowMaxPage >= this.totalPages){
                    return ;
                }
                var end = nowMaxPage+10;
                if(end > this.totalPages){
                    end = this.totalPages;
                }

                this.pageNumList = [];
                for(var i= nowMaxPage+1;i <= end;i++){
                    this.pageNumList.push(i);
                }

                var page = nowMaxPage+1;
                this.pageNow = page;

                var _self = this;
                this.ajaxQuery(page,_self);

            },

            //查询
            getDataList: function (page) {

                var _self = this;
                this.ajaxQuery(page,_self);

            },
            ajaxQuery:function (page, _self) {

                _self.checkedRows=[];
                $.ajax({
                    url:'/job/list?current='+page +'&size='+10,
                    data: _self.qrtzJobDetailsSearchForm,

                }).done(
                    function (dat) {
                        if (dat.code == 0) {
                            var data = dat.data;
                            var dataList=data.records;
                            _self.qrtzJobDetailsList=[];
                            for(var i in dataList){
                                _self.qrtzJobDetailsList.push(dataList[i]);
                            }
                            _self.totalRows = data.total;
                            _self.totalPages= Math.ceil(data.total/data.size);

                            //前10页,
                            if(page <= 10){

                                _self.pageNumList = [];
                                var maxNavNum = _self.totalPages>10?10:_self.totalPages;
                                for(var i=0;i<maxNavNum;i++){
                                    _self.pageNumList.push(i+1);
                                }
                            }

                        }
                    }
                );
            }
        },
        mounted: function () {

            this.switchToPage(1);
        }
    });

</script>